<template>

 <div class="order-container">
<template> 
    <el-table
    :data="orderData"
    border
    style="width: 100%">
       <el-table-column
          prop="orderDetail"
          label="产品图片"
          align="center"
          width="150"
        >
        <template v-slot="{row}">
			<el-avatar shape="square"
				:size="50"
				fit="scale-down"
				:src="row.orderDetail[0].imageUrl">
            </el-avatar>
		</template>
        </el-table-column>
    <el-table-column
      prop="order_id"
      label="订单编号"
      width="180">
    </el-table-column>
    <el-table-column
      prop="orderDetail[0].productName"
      label="产品名称"
      width="180">
    </el-table-column>
    <el-table-column
      prop="orderDetail[0].quantity"
      label="数量">
    </el-table-column>
      <el-table-column
      prop="total_fee"
      label="价格">
    </el-table-column>
     <el-table-column
      prop="pay_status"
      label="支付状态">
      <template v-slot="{row}">
          {{row.pay_status===1?"已支付":"未支付"}}
      </template>
    </el-table-column>
     <el-table-column
      prop="order_status"
      label="订单状态">
      <template v-slot="{row}">
          <span v-if="row.order_status===0">未提交</span>
          <span v-else-if="row.order_status===1">提交成功</span>
          <span v-else-if="row.order_status===2">已经取消</span>
          <span v-else-if="row.order_status===3">无效订单</span>
          <span v-else-if="row.order_status===4">交易关闭</span>
          <span v-else-if="row.order_status===5">退货</span>
      </template>
    </el-table-column>
    <el-table-column
      label="操作">
    <template v-slot="{row}">
          <el-button  v-hasPay="[row.pay_status,row.order_status]">去支付</el-button>
      <el-button icon="el-icon-delete">删除</el-button>
    </template>
    </el-table-column>
  </el-table>
  </template>
 </div>
</template>
<script>
import {mapActions,mapState} from "vuex"
export default {
  data () {
      return {
        
      }
  },
  computed: {
    ...mapState(["orderData"])  
  },
  created () {
     this.GET_ORDER_DATA()
     
  },
  methods: {
      ...mapActions(["GET_ORDER_DATA"])
  },
  directives: {
      hasPay:{
          inserted(el,binding){
            //   指令接收的是用户的支付状态
            // 0未支付 显示去支付按钮
            // 1已支付 禁用去支付按钮
            // console.log(binding);
            
            // 接收到的参数是一个数组[pay_status,order_states]
            let [pay_status,order_status]=binding.value;
            //先保存当前按钮的类名
            let className= el.className;
            //pay_status只要状态不为0就不能支付
            // order_status 0未提交 1已提交 2已经取消 3无效订单 4交易关闭 5退货
            if(pay_status!==0||order_status!==1){
                el.disabled=true;//禁用按钮 功能禁用
                el.className=className+" "+"is-disabled" //样式禁用
            }
          }
      }
  }
} 
</script>
<style scoped lang="less">
    .el-avatar{
        /deep/img{
            width: 100%;
        }
    }
</style>
